import React, { Component, Fragment } from 'react';
import ContainerWrapper from '@/components/ContainerWrapper';
import { Card, DatePicker, Col, Row, Button, Input, Table } from 'antd';
const { RangePicker } = DatePicker;
const style = {
   mr10: {
      marginRight: '10px'
   },
   mt40: {
      marginTop: '40px'
   }
}

class Purchase extends Component {
   onChange = (date, dateString) => {
      console.log(date, dateString);
   }
   renderSearchWrapper = () => {
      return (
         <>
            <Row>
               <Col span={8}>
                  <span>选择日期: </span>
                  <RangePicker onChange={this.onChange} />
               </Col>
               <Col span={8}>
                  <span>商品名称: </span>
                  <Input placeholder="请输入" style={{ width: 300 }} />
               </Col>
               <Col span={8}>
                  <Button type='primary' style={style.mr10}>查询</Button>
                  <Button type='default' style={style.mr10}>重置</Button>
                  <Button type='primary'>导出</Button>
               </Col>
            </Row>
            <Row style={style.mt40}>
               <Col span={8}>
                  <span>商品通用名称: </span>
                  <Input placeholder="请输入" style={{ width: 300 }} />
               </Col>
               <Col span={8}>
                  <span>商品类别: </span>
                  <Input placeholder="请输入" style={{ width: 300 }} />
               </Col>
               <Col span={8}>
                  <span>生产单位: </span>
                  <Input placeholder="请输入" style={{ width: 300 }} />
               </Col>
            </Row>
         </>
      )
   }
   render() {
      const columns = [
         {
            title: '商品类别',
            dataIndex: 'goodsType',
         },
         {
            title: '商品通用名称',
            dataIndex: 'universalName',
         },
         {
            title: '商品名称',
            dataIndex: 'goodsName',
         },
         {
            title: '商品来源方式',
            key: 'originMode',
         },
         {
            title: '规格',
            dataIndex: 'universalName',
         },
         {
            title: '批准文号',
            dataIndex: 'universalName',
         },
         {
            title: '生产批号',
            dataIndex: 'universalName',
         },
         {
            title: '批次号',
            dataIndex: 'universalName',
         },
         {
            title: '货号',
            dataIndex: 'universalName',
         },
         {
            title: '生产单位',
            dataIndex: 'producer',
         },
         {
            title: '商品产地',
            dataIndex: 'universalName',
         },
         {
            title: '供应商名称',
            dataIndex: 'universalName',
         },
         {
            title: '进价（元）',
            dataIndex: 'universalName',
         },
         {
            title: '数量',
            dataIndex: 'universalName',
         },
         {
            title: '单据日期',
            dataIndex: 'universalName',
         },
      ];
      const data = [
         {
            key: '1',
            goodsType: '中药材',
            universalName: '牡丹皮',
            goodsName: '丹皮',
            producer: '生产单位A',
            address: 'New York No. 1 Lake Park',
            tags: ['nice', 'developer'],
         }
      ];

      return (
         <ContainerWrapper>
            <Card bordered={false}>
               {this.renderSearchWrapper()}
               <Table style={style.mt40} columns={columns} dataSource={data} />
            </Card>
         </ContainerWrapper>
      );
   }
}

export default Purchase;
